<template>
  <div class="sub-app-page">
    <a-card title="子应用加载区域" :bordered="false">
      <template #extra>
        <a-space>
          <a-tag color="blue">tds-ec-web</a-tag>
          <a-tag :color="subAppStatus === 'loading' ? 'processing' : 'success'">
            {{ subAppStatus === 'loading' ? '加载中' : '已加载' }}
          </a-tag>
        </a-space>
      </template>
      
      <a-alert
        message="子应用信息"
        description="下方区域将加载 tds-ec-web 子应用，请确保子应用已启动在端口 9092"
        type="info"
        show-icon
        style="margin-bottom: 16px;"
      />
      
      <a-space style="margin-bottom: 16px;">
        <a-button type="primary" @click="refreshSubApp" :loading="subAppStatus === 'loading'">
          <template #icon>
            <ReloadOutlined />
          </template>
          刷新子应用
        </a-button>
        
        <a-button @click="checkSubAppStatus">
          <template #icon>
            <CheckCircleOutlined />
          </template>
          检查状态
        </a-button>
      </a-space>
      
      <!-- 子应用容器 -->
      <div id="tdsec-container" class="sub-app-container">
        <div v-if="subAppStatus === 'loading'" class="loading-container">
          <a-spin size="large">
            <template #indicator>
              <LoadingOutlined style="font-size: 24px" spin />
            </template>
          </a-spin>
          <p style="margin-top: 16px; color: #666;">正在加载子应用...</p>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue'
import { registerSubApps, startQiankun } from '@/qiankun'


// 响应式数据
const subAppStatus = ref('loading')

// 生命周期
onMounted(() => {
  registerSubApps();
  startQiankun();
  console.log('[主应用] 子应用页面已挂载')
  // 模拟子应用加载完成
  setTimeout(() => {
    subAppStatus.value = 'loaded'
  }, 2000)
})

onUnmounted(() => {
  console.log('[主应用] 子应用页面已卸载')
})

// 方法
const refreshSubApp = () => {
  subAppStatus.value = 'loading'
  message.info('正在刷新子应用...')
  
  // 模拟刷新
  setTimeout(() => {
    subAppStatus.value = 'loaded'
    message.success('子应用刷新完成')
  }, 1500)
}

const checkSubAppStatus = () => {
  const container = document.getElementById('tdsec-container')
  if (container && container.children.length > 0) {
    message.success('子应用已成功加载')
  } else {
    message.warning('子应用尚未加载，请检查子应用是否已启动')
  }
}
</script>

<style lang="scss" scoped>
.sub-app-page {
  .sub-app-container {
    min-height: 400px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .loading-container {
      text-align: center;
    }
  }
}
</style> 